<div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" [ngClass]="!isMobile?'margin-left':''">
    <nz-form-item>
      <nz-form-label [nzSpan]="8">开始月份</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-month-picker style="width: 100%"
                         [(ngModel)]="startDateTime"
                         [ngModelOptions]="{standalone: true}"
                         (ngModelChange)="onStartMonth($event)"
                         nzPlaceHolder="选择日期"
                         nzFormat="yyyy-MM">
        </nz-month-picker>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div  class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" [ngClass]="!isMobile?'margin-left':''">
    <nz-form-item>
      <nz-form-label  [nzSpan]="8">结束月份</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-month-picker
          style="width: 100%"
          [(ngModel)]="endDateTime"
          [ngModelOptions]="{standalone: true}"
          (ngModelChange)="onEndMonth($event)"
          nzPlaceHolder="选择日期"
          nzFormat="yyyy-MM">
        </nz-month-picker>
      </nz-form-control>
    </nz-form-item>
  </div>
  <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="2">
    <div nz-col nzFlex="auto" class="search-area">
      <button nz-button nzType="primary" class="button_search"  (click)="search()"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button>
    </div>
  </div>
</div>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">

  <nz-table #nzTable  [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" >
    <thead>
    <tr>
      <th>日期</th>
      <th>结算金额（元）</th>
      <th>总充值笔数</th>
      <th>上月结算金额（元）</th>
      <th>上月充值笔数</th>
      <th>结算金额同比（%）</th>
      <th>充值笔数同比（%）</th>
      <!--      <th>操作</th>-->
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data;let i = index;">
      <tr>
        <td nzEllipsis>{{data.dateStr}}</td>
        <td nzEllipsis>{{data.settlementMoney}}</td>
        <td nzEllipsis>{{data.rechargeCount}}</td>
<!--        <td nzEllipsis>-->
<!--          <span></span>{{data.lastMonthSettlementMoney == null ? "0" : data.lastMonthSettlementMoney}}</td>-->
<!--        <td nzEllipsis>{{data.lastMonthRechargeCount == null ? "0" : data.lastMonthRechargeCount }}</td>-->
        <td nzEllipsis>{{data.monthBeforeSettlementMoney == null ? "0" : data.monthBeforeSettlementMoney}}</td>
        <td nzEllipsis>{{data.monthBeforeRechargeCount == null ? "0" : data.monthBeforeRechargeCount}}</td>
        <td >
          <span *ngIf="data.settlementMoneyDifference > 0" style="color: #fb0e0e">+{{data.settlementMoneyDifference | emptyCheckPipe:2 | percent:'1.0-3'}}</span>
          <span *ngIf="data.settlementMoneyDifference == 0" >{{data.settlementMoneyDifference | emptyCheckPipe:2 | percent:'1.0-3'}}</span>
          <span *ngIf="data.settlementMoneyDifference < 0" style="color: #55ca55"> {{data.settlementMoneyDifference| emptyCheckPipe:2 | percent:'1.0-3'}}</span>
        </td>
        <td >
          <span *ngIf="data.rechargeCountDifference > 0" style="color: #fb0e0e">+{{data.rechargeCountDifference| emptyCheckPipe:2 | percent:'1.0-3'}}</span>
          <span *ngIf="data.rechargeCountDifference == 0" >{{data.rechargeCountDifference | emptyCheckPipe:2 | percent:'1.0-3'}}</span>
          <span *ngIf="data.rechargeCountDifference < 0" style="color: #55ca55">{{data.rechargeCountDifference | emptyCheckPipe:2 | percent:'1.0-3'}}</span>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>
